<template>
  <div>
    <div class="h-panel h-panel-no-border">
      <Tabs :datas="param" v-model="selected"></Tabs>
      <div class="h-panel-body" v-show="selected == 'basicInfo'">
        <Form :model="node" ref="dataForm" v-show="type === 'node'">
          <FormItem label="类型">
            <input type="text" v-model="node.type" :disabled="true" />
          </FormItem>
          <FormItem label="名称">
            <input type="text" v-model="node.name" />
          </FormItem>
          <FormItem label="数据类型" v-show="node.type === 'START'">
            <Select v-model="node.dataType" :datas="dataType"></Select>
          </FormItem>
        </Form>
        <Form :model="line" ref="dataForm" v-show="type === 'line'">
          <FormItem label="条件">
            <input type="text" v-model="line.label" />
          </FormItem>
        </Form>
        <Button :block="true" text-color="primary" @click="save">确认</Button>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'paramInfo'">
        <ParamForm ref="paramForm" @setParams="setParams"></ParamForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'httpInfo'">
        <HttpsForm ref="httpsForm" @setContent="setContent"></HttpsForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'sqlInfo'">
        <SqlForm ref="sqlForm" @setContent="setContent"></SqlForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'fileInfo'">
        <FileForm ref="fileInfo" @setContent="setContent"></FileForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'responseInfo'">
        <ResponseForm ref="responseInfo" @setContent="setContent"></ResponseForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'timedInfo'">
        <TimedForm ref="timedInfo" @setContent="setContent"></TimedForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'tcpserverInfo'">
        <TcpserverForm ref="tcpserverInfo" @setContent="setContent"></TcpserverForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'tcpClientInfo'">
        <TcpclientForm ref="tcpClientInfo" @setContent="setContent"></TcpclientForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'websocketInfo'">
        <WebsocketForm ref="websocketInfo" @setContent="setContent"></WebsocketForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'nacosInfo'">
        <NacosForm ref="nacosInfo" @setContent="setContent"></NacosForm>
      </div>
      <div class="h-panel-body h-panel-no-border" v-show="selected == 'permissionsInfo'">
        <PermissionsForm ref="permissionsInfo" @setContent="setContent"></PermissionsForm>
      </div>
    </div>
  </div>
</template>

<script>
import { cloneDeep } from "lodash";
import ParamForm from "@/components/ef/form_conf/params";
import HttpsForm from "@/components/ef/form_conf/https";
import SqlForm from "@/components/ef/form_conf/sqls";
import FileForm from "@/components/ef/form_conf/files";
import ResponseForm from "@/components/ef/form_conf/response";
import TimedForm from "@/components/ef/form_conf/timed";
import TcpserverForm from "@/components/ef/form_conf/tcpserver";
import TcpclientForm from "@/components/ef/form_conf/tcpclient";
import WebsocketForm from "@/components/ef/form_conf/websocket";
import NacosForm from "@/components/ef/form_conf/nacos";
import PermissionsForm from "@/components/ef/form_conf/permissions";

export default {
  components: {
    ParamForm,
    HttpsForm,
    SqlForm,
    ResponseForm,
    FileForm,
    TcpserverForm,
    TcpclientForm,
    TimedForm,
    WebsocketForm,
    NacosForm,
    PermissionsForm,
  },
  data() {
    return {
      selected: "basicInfo",
      param: {},
      visible: true,
      // node 或 line
      type: "node",
      node: {},
      line: {},
      data: [],
      dataType: [
        { title: "JSON", keyId: "json" },
        { title: "表单", keyId: "form" },
        { title: "文件", keyId: "file" },
      ],
    };
  },
  methods: {
    /**
     * 表单修改，这里可以根据传入的ID进行业务信息获取
     * @param data
     * @param id
     */
    nodeInit(data, id) {
      this.type = "node";
      this.data = data;
      data.nodeList.filter((node) => {
        if (node.id === id) {
          this.node = cloneDeep(node);
          switch (this.node.type) {
            case "START":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                permissionsInfo: "认证方式",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.permissionsInfo.initInfo(this.node.content);

              break;
            case "HTTP":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                httpInfo: "HTTP配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.httpsForm.httpInit(this.node.content, this.node.type);
              break;
            case "HTTP_UPLOAD":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                httpInfo: "HTTP配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.httpsForm.httpInit(this.node.content, this.node.type);
              break;
            case "EXEC_SQL":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                sqlInfo: "SQL编辑器",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.sqlForm.sqlInit(this.node.content);
              break;
            case "QUERY_SQL":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                sqlInfo: "SQL编辑器",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.sqlForm.sqlInit(this.node.content);
              break;
            case "END":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                responseInfo: "响应配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.responseInfo.responseInit(this.node.content);
              break;
            case "FILE_SAVE":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                fileInfo: "文件配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.fileInfo.fileInit(this.node.content, this.node.type);
              break;
            case "FILE_MOVE":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                fileInfo: "文件配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.fileInfo.fileInit(this.node.content, this.node.type);
              break;
            case "FILE_DELETE":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                fileInfo: "文件配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.fileInfo.fileInit(this.node.content, this.node.type);
              break;
            case "FILE_READ":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                fileInfo: "文件配置",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.fileInfo.fileInit(this.node.content, this.node.type);
              break;
            case "TIMED_TASK":
              this.param = {
                basicInfo: "基本信息",
                timedInfo: "定时任务",
              };
              this.selected = "basicInfo";
              this.$refs.timedInfo.initInfo(this.node.content);
              break;
            case "TCP_SERVER":
              this.param = {
                basicInfo: "基本信息",
                tcpserverInfo: "TCP服务",
              };
              this.selected = "basicInfo";
              this.$refs.tcpserverInfo.initInfo(this.node.content);
              break;
            case "TCP_CLIENT":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                tcpClientInfo: "TCP客户端",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.tcpClientInfo.initInfo(this.node.content);
              break;
            case "WEBSOCKET":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                websocketInfo: "WEB-SOCKET",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.websocketInfo.initInfo(this.node.content);
              break;
            case "CLOUD_NACOS":
              this.param = {
                basicInfo: "基本信息",
                paramInfo: "参数配置",
                nacosInfo: "Nacos微服务",
              };
              this.selected = "basicInfo";
              this.$refs.paramForm.paramsInit(this.data, this.node.params);
              this.$refs.nacosInfo.initInfo(this.node.content);
              break;
          }
        }
      });
    },
    lineInit(line) {
      this.type = "line";
      this.line = line;
      this.param = {
        basicInfo: "基本信息",
      };
    },
    setParams(data) {
      this.node.params = data;
      this.save();
    },
    setContent(data) {
      this.node.content = data;
      this.save();
    },
    save() {
      if (this.type == "node") {
        this.data.nodeList.filter((node) => {
          if (node.id === this.node.id) {
            node.name = this.node.name;
            node.left = this.node.left;
            node.top = this.node.top;
            node.ico = this.node.ico;
            node.state = this.node.state;
            node.dataType = this.node.dataType;
            node.params = this.node.params;
            node.content = this.node.content;
            this.$emit("repaintEverything");
          }
        });
      } else {
        this.$emit(
          "setLineLabel",
          this.line.from,
          this.line.to,
          this.line.label
        );
      }
    },
  },
};
</script>

<style>
.el-node-form-tag {
  position: absolute;
  top: 50%;
  margin-left: -15px;
  height: 40px;
  width: 15px;
  background-color: #fbfbfb;
  border: 1px solid rgb(220, 227, 232);
  border-right: none;
  z-index: 0;
}
</style>
